<template>
    <example :template-code="templateString">
        <template #describe>
            <t class="t4" :id="$t('使用前注意事项')">{{ $t('使用前注意事项') }}</t>
            <li>首先需要在<span class="d-code">index.html</span>的<span class="d-code">&lt;head /&gt;标签</span>内引入<span class="d-code">Mathjax</span>数学公式的 CDN 地址</li>
            <pre-code
                style="margin-bottom: 20px;"
                code="&lt;script type=&quot;text/javascript&quot; src=&quot;//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML&quot;>&lt;/script&gt;">
            </pre-code>
            <t :id="`${$t('基础示例')}`">{{ $t('基础示例') }}</t>
            <p>
                <span class="d-code">complete</span>是点击完成按钮抛出的事件；其参数类型为<span class="s-code">Object</span>，包含以下三个字段
            </p>
            <li><span class="s-code">functionString</span>计算函数，它是一个可被eval解析的<span class="s-code">function</span></li>
            <li><span class="s-code">formula</span>计算公式</li>
            <li><span class="s-code">mathjax</span>Mathjax规则代码</li>
        </template>
        <sib-formula @complete="handleComplete"></sib-formula>
    </example>
</template>

<script>

export default {
    setup() {
        return {
            handleComplete(obj) {
                // eslint-disable-next-line
                console.log('公式构造完成：\n', obj);
            },
            templateString: `<template>
    <div class="example-box">
        <sib-formula @complete="handleComplete" />
    </div>
</template>

<script>
    export default {
        setup() {
            return {
                handleComplete(obj) {
                    console.log('公式构造完成：', obj);
                },
            };
        },
    };
<\/script>`,
        };
    },
};
</script>
